<template>
  <div class="template-table__header">
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop" />
    </div>
    <div class="flex items-center">
      <slot v-if="$slots.tableTitle" name="tableTitle" />
      <span v-if="!$slots.tableTitle && title" class="template-table__title">
        {{ title }}
        <el-tooltip
          v-if="titleHelpMessage"
          effect="dark"
          content="Right Center 提示文字"
          placement="right"
        >
          <i class="el-icon-warning-outline" />
        </el-tooltip>
      </span>
      <div :class="`template-table__toolbar`">
        <slot name="toolbar" />
        <el-divider
          v-if="$slots.toolbar && showTableSetting"
          direction="vertical"
        />
        <TableSizeSetting
          v-if="showTableSetting"
          :setting="tableSetting"
          v-bind="$attrs"
          v-on="$listeners"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TableSizeSetting from './TableSizeSetting'
export default {
  components: {
    TableSizeSetting
  },
  props: {
    title: {
      type: [Function, String],
      default: ''
    },
    tableSetting: {
      type: Object,
      default() {
        return {}
      }
    },
    showTableSetting: {
      type: Boolean,
      default: true
    },
    titleHelpMessage: {
      type: [String, Array],
      default: ''
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.template-table__header {
  width: 100%;
  margin-bottom: 5px;
  min-height: 40px;
  height: 40px;
  .flex {
    height: 100%;
  }
}
.template-table__toolbar {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: flex-end;

  > * {
    margin-right: 8px;
  }
}
.template-table__title {
  position: relative;
  padding-left: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 5px;
    top: -2px;
    bottom: -2px;
    left: 0;
    background: #1890ff;
  }
}
</style>
